<template>
    <view>
        <view class="box">
            <view class="centers" @tap="afterRead1">
                <text class="text1">头像</text>
                <image class="heads" :src="userObj.imgPath" @tag="openChooseImage"></image>
            </view>
            <view class="divLine"></view>
            <view class="centers" @tap="showStoreNameBtn">
                <text class="text1">门店名</text>
                <view class="centers_1">
                    <text class="text1" style="text-align: right">{{ userObj.storeName }}</text>
                    <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                </view>
            </view>
        </view>
        <view class="box">
            <view class="centers" @tap="showStationBtn">
                <text class="text1">卡位</text>
                <view class="centers_1">
                    <text class="text1" style="text-align: right">{{ userObj.station }}位</text>
                    <image class="icon-36" :src="imgUrl + 'right.png'"></image>
                </view>
            </view>
            <view class="divLine"></view>
            <view class="centers" @tap="onCoverImg">
                <text class="text1">封面照</text>
                <view class="centers_1">
                    <view class="text1">已选择{{ userObj.coverImg.length || 0 }}张照片，请重新设置</view>
                    <image class="icon-36" :src="imgUrl + 'right.png'"></image>
                </view>
            </view>
            <view class="divLine"></view>
            <view class="centers" @tap="onEnvironment">
                <text class="text1">环境照</text>
                <view class="centers_1">
                    <view class="text1">已选择{{ userObj.environmentImg.length || 0 }}张照片，请重新设置</view>
                    <image class="icon-36" :src="imgUrl + 'right.png'"></image>
                </view>
            </view>
            <view class="divLine"></view>
            <view class="centers" @tap="onServices">
                <text class="text1">服务范围</text>
                <view class="centers_1">
                    <view class="text1">已选择{{ userObj.services.length || 0 }}项服务，请重新设置</view>
                    <image class="icon-36" :src="imgUrl + 'right.png'"></image>
                </view>
            </view>
            <view class="divLine"></view>
            <view class="centers" @tap="onSite">
                <view class="text1">地址</view>
                <view class="centers_1">
                    <text class="text1">{{ userObj.showLocation }}</text>
                    <image class="icon-36" :src="imgUrl + 'right.png'"></image>
                </view>
            </view>
            <!-- <view class="divLine"></view>
  <view class="centers" bindtap="showSex">
    <view class="text1">性别</view>
    <view class="centers_1">
      <text>{{userObj.gender == 1 ? '男':'女'}}</text>
      <image class="icon-36" src="{{imgUrl + 'right.png'}}"></image>
    </view>
  </view> -->
        </view>
        <!-- 弹窗 -->
        <view class="modal-mask" @tap="hideStoreNameModal" v-if="showStoreNameModal"></view>
        <view class="modal-dialog" v-if="showStoreNameModal">
            <view class="modal-title">修改门店名字</view>
            <view class="modal-content">
                <view class="modal-input">
                    <text class="lable">门店名：</text>
                    <input placeholder-class="input-holder" type="text" maxlength="20" class="input" placeholder="请输入门店名" @input="handleinput" v-model="storeName" />
                </view>
                <view class="model-num-text">{{ storeNameLength }}/20</view>
            </view>
            <view class="modal-footer">
                <view class="btn-cancel" @tap="onStoreNameCancel" data-status="cancel">取消</view>
                <view class="btn-confirm" @tap="onStoreNameConfirm" data-status="confirm">确定</view>
            </view>
        </view>
        <!-- 弹窗 -->
        <view class="modal-mask" @tap="hideStationModal" v-if="showStationModal"></view>
        <view class="modal-dialog" v-if="showStationModal">
            <view class="modal-title">修改卡位</view>
            <view class="modal-content">
                <view class="modal-input">
                    <text class="lable">卡位：</text>
                    <input
                        placeholder-class="input-holder"
                        type="number"
                        maxlength="10"
                        class="input"
                        placeholder="请输入卡位"
                        @input="handleinput"
                        @blur="stationblur"
                        :value="storeStation"
                    />
                </view>
            </view>
            <view class="modal-footer">
                <view class="btn-cancel" @tap="onStationCancel" data-status="cancel">取消</view>
                <view class="btn-confirm" @tap="onStationConfirm" data-status="confirm">确定</view>
            </view>
        </view>
        <picker :isShowPicker="isSexShow" @sure="sure" @cancle="cancle" scrollType="normal" :listData="sexs" indicatorStyle="height:47px"></picker>
    </view>
</template>

<script>
import picker from '@/component/picker/picker';
// pages/material/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

const { isNull } = require('../../utils/util.js');

export default {
    components: {
        picker
    },
    data() {
        return {
            baseurl: app.globalData.baseurl,
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            shopimgUrl: app.globalData.shopimgUrl,
            userObj: null,
            servicenames: null,
            isSexShow: false,
            sexs: [['男', '女']],
            showStoreNameModal: false,
            storeName: '',
            showStationModal: false,
            storeStation: '',
            storeNameLength: 0
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function () {},
    onShow: function () {
        // 获取用户个人信息
        this.getStoreCenterInfo();
    },
    methods: {
        // 获取用户个人信息
        getStoreCenterInfo() {
            _request
                .get('/storeCenterInfo/getStoreCenterInfo', {
                    id: uni.getStorageSync('userid')
                })
                .then((res) => {
                    this.setData({
                        userObj: res.data.data
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 头像
        afterRead1() {
            let _this = this;

            uni.chooseImage({
                success(res) {
                    console.log(res.tempFilePaths[0], 'res');
                    const tempFilePaths = res.tempFilePaths;
                    uni.uploadFile({
                        url: _this.baseurl + '/store-api/file/batchUpload',
                        filePath: tempFilePaths[0],
                        name: 'files',
                        header: {
                            token: uni.getStorageSync('token') || null
                        },
                        formData: {
                            file: 'file'
                        },

                        success(res) {
                            const headImg = JSON.parse(res.data).data[0];
                            console.log(headImg, 'headImg');

                            _request
                                .postObj('/storeCenterInfo/updateHeadImg', {
                                    userId: uni.getStorageSync('userId'),
                                    headImg: headImg
                                })
                                .then((res) => {
                                    if (res.data.code === 200) {
                                        uni.showToast({
                                            title: '修改成功',
                                            icon: 'success',
                                            duration: 2000
                                        });

                                        _this.getStoreCenterInfo();
                                    } else {
                                        uni.showToast({
                                            title: res.data.message,
                                            icon: 'none',
                                            duration: 2000
                                        });
                                    }
                                })
                                .catch((error) => {
                                    console.log(error, 'error');
                                });
                        },

                        fail(error) {
                            console.log(error);
                        },

                        complete(res) {
                            console.log(res);
                        }
                    });
                }
            });
        },

        showStoreNameBtn: function () {
            this.setData({
                showStoreNameModal: true
            });
        },

        hideStoreNameModal: function () {
            this.setData({
                storeNameLength: 0,
                storeName: ''
            });
            this.setData({
                showStoreNameModal: false
            });
        },

        onStoreNameCancel: function () {
            this.hideStoreNameModal();
        },

        onStoreNameConfirm: function () {
            var that = this;
            setTimeout(function () {
                var storeName = that.storeName;

                if (!storeName || isNull(storeName)) {
                    uni.showToast({
                        title: '门店名不能为空',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }

                _request
                    .postObj('/storeCenterInfo/updateStoreName', {
                        storeId: uni.getStorageSync('storeId'),
                        storeName: that.storeName
                    })
                    .then((res) => {
                        if (res.data.code === 200) {
                            let userObj = that.userObj;
                            userObj.storeName = that.storeName;
                            that.setData({
                                userObj: userObj
                            });
                            that.hideStoreNameModal();
                            uni.showToast({
                                title: '修改成功',
                                icon: 'success',
                                duration: 2000
                            });
                        } else {
                            that.hideStoreNameModal();
                            uni.showToast({
                                title: res.data.message,
                                icon: 'none',
                                duration: 2000
                            });
                        }
                    })
                    .catch((error) => {
                        console.log(error, 'error');
                    });
            }, 100);
        },

        // 卡位
        stationblur: function (e) {
            this.setData({
                storeStation: e.detail.value
            });
        },

        showStationBtn: function () {
            this.setData({
                showStationModal: true
            });
        },

        hideStationModal: function () {
            this.setData({
                storeStation: ''
            });
            this.setData({
                showStationModal: false
            });
        },

        onStationCancel: function () {
            this.hideStationModal();
        },

        onStationConfirm: function () {
            var that = this;
            setTimeout(function () {
                if (!that.storeStation || isNull(that.storeStation)) {
                    uni.showToast({
                        title: '卡位不能为空',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }

                _request
                    .postObj('/storeCenterInfo/updateStation', {
                        storeId: uni.getStorageSync('storeId'),
                        storeStation: that.storeStation.trim()
                    })
                    .then((res) => {
                        if (res.data.code === 200) {
                            let userObj = that.userObj;
                            userObj.station = that.storeStation.trim();
                            that.setData({
                                userObj: userObj
                            });
                            that.hideStationModal();
                            uni.showToast({
                                title: '修改成功',
                                icon: 'success',
                                duration: 2000
                            });
                        } else {
                            that.hideStationModal();
                            uni.showToast({
                                title: res.data.message,
                                icon: 'none',
                                duration: 2000
                            });
                        }
                    })
                    .catch((error) => {
                        console.log(error, 'error');
                    });
            }, 100);
        },

        // 地址
        onSite() {
            uni.navigateTo({
                url: '/pages/myprofile/site/index'
            });
        },

        // 性别
        showSex: function () {
            this.setData({
                isSexShow: true
            });
        },

        sure(e) {
            this.setData({
                isSexShow: false
            });
            var sex = e.detail.choosedData[0] == '男' ? 1 : 2;

            _request
                .postObj('/storeCenterInfo/updateUserSex', {
                    userId: uni.getStorageSync('userId'),
                    sex: sex
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '修改成功',
                            icon: 'success',
                            duration: 2000
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        cancle() {
            this.setData({
                isSexShow: false
            });
        },

        // 环境图
        onEnvironment() {
            uni.navigateTo({
                url: '/pages/myprofile/environment/index'
            });
        },

        //封面照
        onCoverImg() {
            uni.navigateTo({
                url: '/pages/setcover/index?name=' + (this.userObj?.coverTitle || '')
            });
        },

        // 服务范围
        onServices() {
            uni.navigateTo({
                url: '/pages/myprofile/services/index'
            });
        },

        openChooseImage() {
            uni.chooseImage({
                count: 1,
                success: function () {
                    // 缺少头像上传接口
                }
            });
        },

        handleinput(event) {
            this.setData({
                storeNameLength: event.detail.value.length,
                storeStation: event.detail.value
            });
        }
    }
};
</script>
<style>
.text1 {
    font-size: 28rpx;
}
.box {
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10rpx;
    box-sizing: border-box;
    margin: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    padding: 20rpx;
}

.centers {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    margin: 30rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
}

.centers_1 {
    width: 75%;
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-content: center;
}

.centers_1 text {
    max-width: 90%;
    text-align: left;
}

/*分割线样式*/
.divLine {
    background: #dadada;
    width: 100%;
    height: 1rpx;
}

.iconbox {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background-color: #ededed;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
}

.iconbox image {
    width: 80rpx;
    height: 80rpx;
}

.heads {
    height: 138rpx;
    width: 138rpx;
    z-index: 3;
    border-radius: 50%;
}

.savebtn {
    width: 690rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 30rpx;
    position: relative;
    top: 30rpx;
}

/**index.wxss**/
.show-btn {
    margin-top: 100rpx;
    color: #22cc22;
}
.modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 9999;
    color: #fff;
}
.modal-dialog {
    width: 540rpx;
    overflow: hidden;
    position: fixed;
    top: 40%;
    left: 0;
    z-index: 9999;
    background: #ffffff;
    margin: -180rpx 105rpx;
    border-radius: 10rpx;
}
.modal-title {
    padding-top: 50rpx;
    font-size: 36rpx;
    color: #333333;
    text-align: center;
}
.modal-content {
    padding: 50rpx 32rpx;
    position: relative;
}
.modal-input {
    display: flex;
    background: #f6f6f6;
    border-radius: 4rpx;
    font-size: 28rpx;
}
.model-num-text {
    position: absolute;
    right: 0rpx;
    bottom: 0rpx;
    font-size: 28rpx;
    margin-right: 10rpx;
}
.lable {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
}
.input {
    height: 82rpx;
    font-size: 28rpx;
    line-height: 28rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    color: #333;
}
input-holder {
    color: #666;
    font-size: 28rpx;
}

.modal-footer {
    display: flex;
    flex-direction: row;
    height: 86rpx;
    border-top: 1px solid #dedede;
    font-size: 34rpx;
    line-height: 86rpx;
}
.btn-cancel {
    width: 50%;
    color: #333;
    z-index: 9999;
    text-align: center;
    border-right: 1px solid #dedede;
}
.btn-confirm {
    width: 50%;
    z-index: 9999;
    color: #ff8722;
    text-align: center;
}

page {
    background-color: #fbfbfb;
}
</style>
